<template>
    <div class="dev-content" v-resizeob="resizeEcharts">
        <div class="dev-left">
            <div class="left-top2">
                <img src="../assets/img/bj-1.png" alt="" class="bj-1">
                <img src="../assets/img/bj-2.png" alt="" class="bj-2">
                <img src="../assets/img/bj-3.png" alt="" class="bj-3">
                <img src="../assets/img/bj-4.png" alt="" class="bj-4">
                <div class="dev-charts" style="width: 100%; height: 100%;">
                    <div class="boxall">
                        <div class="alltitle">今日统计</div>
                        <div class="sycm">
                            <ul class="clearfix">
                                <li>
                                    <h2>1</h2><span>今日新增报障</span>
                                </li>
                                <li>
                                    <h2>1</h2><span>待分派报障</span>
                                </li>
                                <li>
                                    <h2>2</h2><span>今日新增告警</span>
                                </li>
                            </ul>
                            <div style="border-bottom: 1px solid rgba(255,255,255,.1)"></div>
                            <ul class="clearfix">
                                <li>
                                    <h2>4</h2><span>正在解决报障</span>
                                </li>
                                <li>
                                    <h2>2</h2><span>今日解决报障</span>
                                </li>
                                <li>
                                    <h2>10</h2><span>今日新增知识</span>
                                </li>
                            </ul>
                        </div>
                        <div class="boxfoot"></div>
                    </div>
                </div>
            </div>
            <div class="left-center2">
                <img src="../assets/img/bj-1.png" alt="" class="bj-1">
                <img src="../assets/img/bj-2.png" alt="" class="bj-2">
                <img src="../assets/img/bj-3.png" alt="" class="bj-3">
                <img src="../assets/img/bj-4.png" alt="" class="bj-4">
                <div class="pro-charts" style="width: 100%; height: 100%;">
                    <el-table :data="tableData" style="width: 100%;" height="100%">
                        <el-table-column prop="model" label="服务器型号" width="190">
                        </el-table-column>
                        <el-table-column prop="run" label="正在运行">
                        </el-table-column>
                        <el-table-column prop="fault" label="故障">
                        </el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button @click="detailRow(scope.row)" type="text" size="small">
                                    详情
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
            <div class="left-down2">
                <img src="../assets/img/bj-1.png" alt="" class="bj-1">
                <img src="../assets/img/bj-2.png" alt="" class="bj-2">
                <img src="../assets/img/bj-3.png" alt="" class="bj-3">
                <img src="../assets/img/bj-4.png" alt="" class="bj-4">
                <div class="pro-charts total-data">
                    <div class="item-pro">
                        <div class="title">近30天报障</div>
                        <div class="item-pro-con">
                            <div>故障11个</div>
                            <div>咨询1个</div>
                            <div>服务请求1个</div>
                            <div>投诉意见1个</div>
                        </div>
                    </div>
                    <div class="item-pro">
                        <div class="title">数据统计</div>
                        <div class="item-pro-con">
                            <div>报障统计26个</div>
                            <div>告警统计11个</div>
                            <div>知识统计4个</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="dev-center">
            <div class="center-top">
                <div style="width: 100%; height: 100%;" ref="chartsDOM">
                </div>
            </div>
            <div class="center-down">
                <div class="roll-title">
                    <span class="roll-item">工单编码</span>
                    <span class="roll-item">事件性质</span>
                    <span class="roll-item">所属区域</span>
                    <span class="roll-item">提报单位</span>
                    <span class="roll-item">工单状态</span>
                    <span class="roll-item">受理人</span>
                </div>
                <div class="seamlessRolling" @click="lookClick($event)">
                    <vue-seamless-scroll :data="msgData" :class-option="classOption">
                        <ul>
                            <li v-for="(item, index) in msgData" :key="item.id">
                                <span class="li-item">{{ item.id }}</span>
                                <span class="li-item">{{ item.event }}</span>
                                <span class="li-item">{{ item.region }}</span>
                                <span class="li-item">{{ item.reportingUnit }}</span>
                                <span class="li-item">{{ item.state }}</span>
                                <span class="li-item">{{ item.accepted }}</span>
                            </li>
                        </ul>
                    </vue-seamless-scroll>
                </div>
            </div>
        </div>
        <div class="dev-right">
            <div class="right-top2">
                <img src="../assets/img/bj-1.png" alt="" class="bj-1">
                <img src="../assets/img/bj-2.png" alt="" class="bj-2">
                <img src="../assets/img/bj-3.png" alt="" class="bj-3">
                <img src="../assets/img/bj-4.png" alt="" class="bj-4">
                <div ref="chartsRT" class="pro-charts right-t" style="width: 100%;">
                </div>
            </div>
            <div class="right-down2">
                <img src="../assets/img/bj-1.png" alt="" class="bj-1">
                <img src="../assets/img/bj-2.png" alt="" class="bj-2">
                <img src="../assets/img/bj-3.png" alt="" class="bj-3">
                <img src="../assets/img/bj-4.png" alt="" class="bj-4">
                <div ref="chartsRD" class="pro-charts e1" style="width: 100%;"></div>
            </div>
        </div>
    </div>
</template>
<script>
import * as echarts from 'echarts';
import 'echarts-liquidfill'
import getChangZhimap from "../api/getChangZhiMap";
import vueSeamlessScroll from "vue-seamless-scroll";
export default {
    name: "devopsScreen",
    data() {
        return {
            msgData: [
                {
                    id: 'p2020103111',
                    event: '故障',
                    region: "武乡维修站",
                    reportingUnit: "武乡中学",
                    state: "已分派",
                    accepted: "李某",
                },
                {
                    id: 'p2020103112',
                    event: '故障',
                    region: "襄垣维修站",
                    reportingUnit: "襄垣中学",
                    state: "已分派",
                    accepted: "李某",
                },
                {
                    id: 'p2020103113',
                    event: '故障',
                    region: "襄垣维修站",
                    reportingUnit: "襄垣中学",
                    state: "待分派",
                    accepted: "李某",
                },
                {
                    id: 'p2020103114',
                    event: '故障',
                    region: "武乡维修站",
                    reportingUnit: "武乡中学",
                    state: "已分派",
                    accepted: "王某",
                },
                {
                    id: 'p202010315',
                    event: '故障',
                    region: "武乡维修站",
                    reportingUnit: "武乡中学",
                    state: "待分派",
                    accepted: "李某",
                },
            ],
            tableData: [{
                model: '玉龙PF系列飞腾笔记本',
                run: '2',
                fault: '1'
            }, {
                model: '凌云MF系列一体机',
                run: '10',
                fault: '0'
            },
            {
                model: '玉龙DL系列龙芯台式机',
                run: '11',
                fault: '0'
            },
            {
                model: '长缨CL7351工控机',
                run: '30',
                fault: '0'
            },
            {
                model: '手持平板设备',
                run: '49',
                fault: '0'
            },
            {
                model: '晨月SF系列机架式服务器',
                run: '18',
                fault: '0'
            }],
            myChart: null,
            myChartRT: null,
            myChartRD: null,
        };
    },
    components: { vueSeamlessScroll },
    computed: {
        classOption() {
            return {
                step: 0.5, // 数值越大速度滚动越快
                limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
                hoverStop: true, // 是否开启鼠标悬停stop
                direction: 1, // 0向下 1向上 2向左 3向右
                openWatch: true, // 开启数据实时监控刷新dom
                singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
                singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
                waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
            };
        },
    },
    mounted() {
        // 中间地图
        // 初始化统计图对象
        this.myChart = echarts.init(this.$refs["chartsDOM"]);
        // 显示 loading 动画
        this.myChart.showLoading();
        // 再得到数据的基础上，进行地图绘制
        getChangZhimap.then(res => {
            // 得到结果后，关闭动画
            this.myChart.hideLoading();
            // 注册地图(数据放在axios返回对象的data中哦)
            echarts.registerMap('CZ', res.data);
            var option = {
                visualMap: {
                    min: 1111,
                    max: 333332,
                    realtime: false,
                    calculable: true,
                    inRange: {
                        color: ['lightskyblue', 'yellow', 'orangered']
                    }
                },
                tooltip: {},
                series: [
                    {
                        name: '长治地图',
                        type: 'map',
                        map: 'CZ',// 这个是上面注册时的名字哦，registerMap（'这个名字保持一致'）
                        label: {
                            show: true
                        },
                        data: [
                            { name: '武乡县', value: 11111 },
                            { name: '沁县', value: 22221 },
                            { name: '沁源县', value: 33333 },
                            { name: '屯留区', value: 22231 },
                            { name: '襄垣县', value: 44441 },
                            { name: '黎城县', value: 555525 },
                            { name: '潞城区', value: 162475 },
                            { name: '潞州区', value: 65454 },
                            { name: '长子县', value: 77771 },
                            { name: '上党区', value: 88884 },
                            { name: '壶关县', value: 99995 },
                            { name: '平顺县', value: 10001 },
                        ]
                    },
                ]
            };
            this.myChart.setOption(option);
        })

        // 右上柱状图
        this.myChartRT = echarts.init(this.$refs["chartsRT"]);
        var optionRT = {
            title: {
                text: '设备故障分布',
                left: 'center',
                textStyle: {
                    color: '#fff',
                    fontSize: '16px',
                    fontWeight: 'normal'
                }
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                top: '10%',
                containLabel: true
            },
            xAxis: {
                type: 'value',
                boundaryGap: [0, 0.01]
            },
            yAxis: {
                type: 'category',
                data: ['办公', '内存', '通信', '网卡', '其他', '鼠标', '键盘', '硬盘', 'CPU', '显卡']
            },
            series: [
                {
                    name: '2011',
                    type: 'bar',
                    data: [18, 23, 29, 10, 13, 30, 23, 29, 10, 23, 18, 13, 11, 13, 15, 23]
                },
            ]
        };
        optionRT && this.myChartRT.setOption(optionRT);

        // 右下柱状图
        this.myChartRD = echarts.init(this.$refs["chartsRD"]);
        var optionRD = {
            title: {
                text: '处理工单top5',
                left: 'center',
                textStyle: {
                    color: '#fff',
                    fontSize: '16px',
                    fontWeight: 'normal'
                }
            },
            xAxis: {
                type: 'category',
                data: ['李xx', '王xx', '刘xx']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: [2, 5, 6],
                    type: 'bar',
                    barWidth: '30%'
                }
            ]
        };
        optionRD && this.myChartRD.setOption(optionRD);
    },
    methods: {
        detailRow(row) {
            console.log(row);
            window.open('http://127.0.0.1:5500/src/transparent.html', '_blank')
        },
        resizeEcharts() {
            this.myChart.resize()
            this.myChartRT.resize()
            this.myChartRD.resize()
        },
        lookClick(e) {
            if (e.target.className == "handle") {
                console.log(e.target.id);
                console.log(e.target.dataset.tit);
            }
        },
    },
};
</script>

<style lang='less' scoped>
@import '../css/devScreen.css';

.roll-title {
    display: flex;
    justify-content: space-between;
    color: #ffffff;
    font-size: 16px;
    padding-left: 10px;
    box-sizing: border-box;

    .roll-item {
        width: 110px;
        text-align: center;
    }
}

.seamlessRolling {
    margin: 0 auto;
    width: 100%;
    height: 100%;
    overflow: hidden;
    color: #c5ccff;
    padding-left: 10px;
    box-sizing: border-box;

    ul,
    li {
        list-style: none;
    }

    li {
        height: 40px;
        line-height: 40px;
        display: flex;
        justify-content: space-between;

        .li-item {
            width: 110px;
            text-align: center;
        }

        .handle {
            cursor: pointer;
        }
    }
}



// 表格部分样式
// 最外层透明
::v-deep .el-table,
::v-deep .el-table__expanded-cell {
    background-color: transparent;
    color: #c5ccff;
    font-size: 24px;
}

// 表格内背景颜色 
::v-deep .el-table th,
::v-deep .el-table tr,
::v-deep .el-table td {
    background-color: transparent;
    border: 0px;
    color: #c5ccff;
    font-size: 16px;
    height: 5px;
    font-family: Source Han Sans CN Normal, Source Han Sans CN Normal-Normal;
    font-weight: Normal;
}

// 去掉最下面的那一条线 
.el-table::before {
    height: 0px;
}

// 设置表格行高度
::v-deep .el-table__body tr,
::v-deep .el-table__body td {
    padding: 0;
    height: 54px;
}

// 修改高亮当前行颜色
::v-deep .el-table tbody tr:hover>td {
    background: #063570 !important;
}

// 取消当前行高亮
// ::v-deep .el-table tbody tr {
//   pointer-events: none;
// }

// 修改表头样式-加边框
::v-deep .el-table__header-wrapper {
    // border: solid 1px #04c2ed;
    // box-sizing: border-box;
}

// 表格斑马自定义颜色
::v-deep .el-table__row.warning-row {
    background: #063570;
}

// 滚动条样式
::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {
    background-color: #063570;
}

::v-deep .el-table__body-wrapper::-webkit-scrollbar {
    width: 10px;
    opacity: 0.5;
}

::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
    border-radius: 15px;
    background-color: #0257aa;
}
</style>../api/request